<template>
	<view>
		<u-navbar title="我的对话" :is-back="false" back-icon-size="34" title-size="36" :border-bottom="false"
			:background="background" title-color="#222" back-icon-color="#222"></u-navbar>
		<view class="">
			<scroll-view :scroll-top="scrollTop" scroll-x="true" class="scroll-Y"
				style="white-space: nowrap; background: #fff">
				<view class=""
					style="display: flex; align-items: center; background: #fff; height: 170rpx; margin-left: 36rpx">
					<view :class="current == k ? 'on1' : 'on'" v-for="(i, k) in list" :key="k"
						style="margin-right: 30rpx; position: relative" @tap="room(k)">
						<!-- <view class="" style="color: red;position: absolute;top: 2rpx;right: 10rpx;" v-if="i.msg_num!=0">
							<view class="" style="border-radius: 50%;width: 40rpx;height: 40rpx;background: red;font-size: 24rpx;line-height: 40rpx;color: #fff;text-align: center;">
								{{i.msg_num}}
							</view>
						</view> -->
						<view class="" style="font-size: 28rpx">
							{{ i.patient_name }}
						</view>
						<view class="" style="font-size: 24rpx" v-if="i.patient_age">{{ i.patient_gender_text }} ·
							{{ i.patient_age }}岁</view>
						<view class="" v-else style="height: 22rpx">
							{{ ' ' }}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="">
			<u-tabs :list="lists" :is-scroll="false" :current="current1" @change="change" bg-color="#f8f8f8"></u-tabs>
		</view>
		<view class="">
			<view class="" v-if="chatlist == ''"
				style="font-size: 28rpx; color: #666; text-align: center; padding-top: 30rpx">您还暂未问诊消息...</view>
			<scroll-view scroll-y="true" id="box" :style="{ height: boxHeight + 'px' }" @scrolltolower="chatroom">
				<view class="" v-if="chatlist != ''">
					<view class="" style="margin: 20rpx 28rpx; background: #fff; border-radius: 20rpx"
						v-for="(i, k) in chatlist" :key="k"
						@tap="chat(i.doctor.doctor_id, i.user_patient.patient_id, i.order_res.order_type)">
						<view class=""
							style="display: flex; align-items: center; padding: 28rpx; justify-content: space-between">
							<view class="" style="font-size: 24rpx; color: #666">
								{{ i.last_time }}
							</view>
							<view class="" style="text-align: right; color: #1a9eff" v-if="i.order_res">
								{{ i.order_res.order_status_text }}
							</view>
						</view>

						<view class=""
							style="display: flex; justify-content: space-between; padding: 0rpx 22rpx 11rpx 26rpx">
							<view class="" style="display: flex; align-items: flex-start">
								<view class="">
									<image :src="i.doctor.doctor_avatar" mode="aspectFill"
										style="width: 112rpx; height: 112rpx; border-radius: 50%"></image>
								</view>
								<view class="" style="padding-left: 18rpx">
									<view class="">
										<text
											style="font-size: 30rpx; font-weight: bold">{{ i.doctor.doctor_name }}</text>
										<text
											style="font-size: 26rpx; padding-left: 20rpx">{{ i.doctor.doctor_title }}</text>
									</view>
									<view class="" style="
                      font-size: 26rpx;
                      color: #666;
                      padding-top: 29rpx;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      -webkit-line-clamp: 1;
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      width: 300rpx;
                    " v-if="i.last_log && i.last_log.content">
										{{ i.last_log.content }}
									</view>
								</view>
							</view>
							<view class="" style="font-size: 24rpx; color: #666">
								<!-- {{i.last_time}} -->
							</view>
						</view>
						<view class="" v-if="i.msg_num != 0"
							style="display: flex; justify-content: flex-end; margin-right: 28rpx">
							<view class=""
								style="border-radius: 50%; width: 40rpx; height: 40rpx; background: red; font-size: 24rpx; line-height: 40rpx; color: #fff; text-align: center">
								{{ i.msg_num }}
							</view>
						</view>

						<view class=""
							style="font-size: 26rpx; text-align: right; padding-right: 19rpx; padding-bottom: 18rpx">
							就诊人：{{ i.user_patient.patient_name }}</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="" style="position: fixed; bottom: 220rpx; right: 22rpx" @tap="shopchat">
			<view class="" style="width: 136rpx; height: 136rpx; text-align: center; position: relative">
				<image src="https://wenzhen.jiangkukeji360.com/static/shop/xx.png" mode=""
					style="width: 136rpx; height: 136rpx"></image>
				<view class="" style="font-size: 26rpx; position: absolute; top: 87rpx; left: 42rpx">消息</view>
				<view class=""
					style="width: 12rpx; height: 12rpx; border-radius: 50%; background: #e50014; position: absolute; top: 23rpx; right: 23rpx"
					v-if="count != 0"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					background: '#FFFFFF'
				},
				scrollTop: 0,
				list: [],
				current: 0,
				lists: [{
						name: '我的问诊'
					},
					{
						name: '我的复诊'
					}
				],
				current1: 0,
				page: 1,
				chatlist: [],
				boxHeight: '',
				msgs: null,
				count: null
			};
		},
		onReady() {
			this.box();
		},
		watch: {
			msgs: {
				handler(newName, oldName) {
					console.log('进不来？');
					this.chatroom(1);
				},
				deep: true
			}
		},
		methods: {
			unread() {
				this.api({
					url: '/api/news/unread',
					method: 'post'
				}).then((res) => {
					this.count = res.data.count;
				});
			},
			shopchat() {
				uni.navigateTo({
					url: '/chat/cahtxiao/cahtxiao'
				});
			},
			box() {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#box')
					.boundingClientRect((data) => {
						this.boxHeight = this.screenHeight - data.top - 50;
					})
					.exec();
			},
			change(index) {
				this.current1 = index;
				this.chatroom(1);
			},
			oss() {
				this.api({
					url: '/api/index/patientList',
					method: 'post'
				}).then((res) => {
					this.list = res.data;
					let arr = {
						patient_name: '全  部'
					};
					this.list.unshift(arr);
					if (this.list) {
						// this.chatroom(1)
					}
				});
			},  
			chatroom(e) {
				console.log(e,"的快感和")
				if (e == 1) {
					this.page = 1;
				}
				this.api({
					url: '/api/index/consultList',
					method: 'post',
					data: {
						type: this.current1 + 1,
						patient_id: this.current == 0 ? '' : this.list[this.current].patient_id,
						page: this.page
					}
				}).then((res) => {
					if (e == 1) {
						this.chatlist = [];
					}

					this.chatlist = this.chatlist.concat(res.data);

					this.page++;
					console.log(this.chatlist, this.page, 'sdasdasd');
					this.chatlist.map((i) => {
						if (i.msg_num != 0) {} else {
							uni.hideTabBarRedDot({
								index: 1
							});
						}
					});
				});
			},
			room(k) {
				this.current = k;
				this.chatroom(1);
			},
			chat(e, a, type) {
				console.log(e, a, '---------=-=-=-=', type);

				uni.navigateTo({
					url: '/chat/chat/chat?id=' + e + '&patient_id=' + a + '&type=' + type
				});
			}
		},
		onLoad() {
			this.msgs = this.util.msg;
		},
		async onShow() {
			await this.oss();
			this.unread();
			this.chatroom(1);
		}
	};
</script>

<style>
	.on {
		padding: 21rpx 53rpx 15rpx 25rpx;
		background: #f0f0f0;
		border-radius: 20rpx;
	}

	page {
		background: #f8f8f8;
	}

	.on1 {
		padding: 21rpx 53rpx 15rpx 25rpx;

		background: linear-gradient(0deg, #1a9eff 0%, #0fb8ff 100%);
		border-radius: 20rpx;
		color: #fff;
	}
</style>